<template>
	<div>
		<div class="search">
			<el-form ref="searchForm" :inline="true" :model="searchForm" class="form-inline" size="mini">
				<el-form-item label="编号" prop="code">
					<el-input clearable v-model.trim="searchForm.code" placeholder="请输入媒体编号" />
				</el-form-item>
				<el-form-item label="楼盘" prop="building_area_id">
					<el-select v-model="searchForm.building_area_id" filterable clearable placeholder="请选择楼盘">
						<el-option v-for="item in buildingAreaList" :key="item.id" :label="item.name" :value="item.id">
							<span style="float: left">{{ item.name }}</span>
							<!-- 							<span
                              style="float: right; color: #8492a6; font-size: 12px">{{ item.status==1?'':'已禁用' }}</span> -->
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="安装工" prop="worker_id">
					<el-select v-model="searchForm.worker_id" filterable clearable placeholder="请选择安装工">
						<el-option v-for="item in workerList" :key="item.id" :label="item.real_name" :value="item.id">
							<span style="float: left">{{ item.real_name }}</span>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="媒体类型" prop="media_type_id">
					<el-select v-model="searchForm.media_type_id" filterable clearable placeholder="请选择媒体类型">
						<el-option v-for="item in pointTypeList" :key="item.id" :label="item.name" :value="item.id">
							<span style="float: left">{{ item.name }}</span>
							<span
								style="float: right; color: #8492a6; font-size: 12px">{{ item.status == 1 ? '' : '已禁用' }}</span>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" plain @click="searchSubmit('searchForm')" class="margin-left">搜索
					</el-button>
					<el-button type="info" plain @click="searchReset">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-row class="margin-bottom-xs" v-if="hasCheckBatchBTN">
			<el-button type="primary" @click="passBatch" size="mini" :disabled="!selectRows || selectRows.length<=0">
				批量通过
			</el-button>
			<el-button type="danger" @click="unpassBatch" size="mini" :disabled="!selectRows || selectRows.length<=0">
				批量未通过
			</el-button>
		</el-row>
		<!-- 分页数据 -->
		<el-pagination v-if="hasPage" @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page.sync="current" :page-sizes="[5, 10, 20, 30, 40, 50]" :page-size="listParams.page_size"
			layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>
		<el-table stripe tooltip-effect="dark" style="width: 100%" border highlight-current-row row-key="id" size="mini"
			v-loading="tabLoading" :data="tableData" :row-class-name="tableRowClassName"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="40" align="center" v-if="hasTableSelections" />
			<el-table-column type="index" label="序号" width="50" align="center">
				<template slot-scope="scope">
					<span>{{
              hasPage ? ((listParams.page - 1) * listParams.page_size + scope.$index + 1) : (scope.$index + 1)
            }}</span>
				</template>
			</el-table-column>
			<el-table-column label="照片" align="center" min-width="150">
				<template slot-scope="scope">
					<div class="flex justify-center align-center flex-wrap">
						<div v-for="(item,index) in scope.row.img_vo_list" :key="item.id"
							class="flex flex-direction justify-center align-center flex-no-wrap">
							<el-image
								:style="{'width': (scope.row.img_vo_list.length==1?'auto':'150px'),'height':(scope.row.img_vo_list.length==1?'320px':'200px')}"
								:src="item.url" @click.natvie="showImageDialog(scope.row.img_vo_list,item.url)" lazy
								fit="scale-down">
							</el-image>
							<!--:preview-src-list="scope.row.img_vo_list.map(item => item.url)" lazy fit="scale-down">-->
							<div class="margin-top-xs flex justify-center align-center">
								<el-button @click.natvie="confirmChangePhoto(scope.row.id, item.id)" size="mini" round>
									替换照片</el-button>
							</div>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="设备信息" align="center" width="700">
				<template slot-scope="scope">
					<el-form :ref="'rowForm'+scope.row.id" :rules="scope.row.cuRulesAudit || {}" :model="scope.row"
						size="mini" class="audit-info" label-width="100px" center inline-message>
						<el-row :gutter="5" v-if="!canEditInfo && !scope.row.isEdit">
							<el-col :span="12">
								<el-form-item label="媒体编号:">
									<span>{{ scope.row.code }}</span>
								</el-form-item>
								<el-form-item label="工单:">
									<span>{{ scope.row.work_order_name || '' }}</span>
								</el-form-item>
								<el-form-item label="合同:">
									<span>{{ scope.row.contract_name || '' }}</span>
								</el-form-item>
								<el-form-item label="合同时间段:">
									<span>{{ scope.row.date_range_show || '' }}</span>
								</el-form-item>
								<el-form-item label="安装工:">
									<span>{{ scope.row.worker_name }}</span>
								</el-form-item>
								<el-form-item label="类型:">
									<el-tag size="mini" v-if="scope.row.install_type==1">上刊</el-tag>
									<el-tag size="mini" v-else-if="scope.row.install_type==2" type="danger">下刊</el-tag>
									<el-tag size="mini" v-else-if="scope.row.install_type==3" type="warning">巡检</el-tag>
									<el-tag size="mini" v-else-if="scope.row.install_type==4" type="success">新安装
									</el-tag>
									<el-tag size="mini" v-else-if="scope.row.install_type==5" type="info">维修</el-tag>
								</el-form-item>
								<el-form-item label="提交时间:">
									<span>{{ scope.row.created_at }}</span>
								</el-form-item>
								<el-form-item label="广告内容:">
									<span>{{ scope.row.advertising_content }}</span>
								</el-form-item>
								<el-form-item label="备注:">
									<span>{{ scope.row.remark }}</span>
								</el-form-item>
								<el-form-item label="故障与否:">
									<div>
										<el-tag class="names-tag" size="mini" v-if="scope.row.breakdown_type==0"
											type="info"> 完好
										</el-tag>
										<el-tag class="names-tag" size="mini"
											v-if="scope.row.breakdown_type==1 && scope.row.has_to_repair_order_id==0"
											type="danger"> 故障
										</el-tag>
										<el-tag class="names-tag" size="mini"
											v-if="scope.row.breakdown_type==1 && scope.row.has_to_repair_order_id>0"
											type="success"> 已转维修
										</el-tag>
									</div>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="楼盘:">
									<span>{{ scope.row.building_area_name }}</span>
								</el-form-item>
								<el-form-item label="媒体类型:">
									<span>{{ scope.row.media_type_name }}</span>
								</el-form-item>
								<el-form-item label="媒体特点:">
									<span>{{ scope.row.media_feature || '' }}</span>
								</el-form-item>
								<el-form-item label="尺寸:">
									<span>{{ scope.row.size || '' }}</span>
								</el-form-item>
								<el-form-item label="门号:"
									v-if="scope.row.media_type_pid==119 || scope.row.media_type_pid==120">
									<span>{{ scope.row.door_number ? (scope.row.door_number + '号门') : '' }}</span>
								</el-form-item>
								<el-form-item label="护栏号:"
									v-if="scope.row.media_type_pid==120 && scope.row.media_type_id==135">
									<span>{{ scope.row.rail_number ? scope.row.rail_number : '' }}</span>
								</el-form-item>
								<el-form-item label="楼号:" v-if="scope.row.media_type_pid==119">
									<span>{{ scope.row.building_number ? (scope.row.building_number + '号楼') : '' }}</span>
								</el-form-item>
								<el-form-item label="单元号:" v-if="scope.row.media_type_pid==119">
									<span>{{ scope.row.unit_number ? (scope.row.unit_number + '单元') : '' }}</span>
								</el-form-item>
								<el-form-item label="楼层:" v-if="scope.row.media_type_pid==119">
									<span>{{ scope.row.floor ? (scope.row.floor + '层') : '' }}</span>
								</el-form-item>
								<el-form-item label="楼栋类型:" v-if="scope.row.media_type_pid==119">
									<span>{{ scope.row.building_type == 1 ? '多层' : (scope.row.building_type == 2 ? '高层' : '') }}</span>
								</el-form-item>
								<el-form-item label="楼栋类型:">
									<span>{{ scope.row.pic_type_name }}</span>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="5" v-else>
							<el-col :span="12">
								<el-form-item label="媒体编号:" prop="code">
									<el-input clearable v-model.trim="scope.row.code" placeholder="请输入媒体编号" />
								</el-form-item>
								<el-form-item label="工单:" prop="work_order_id">
									<el-select clearable filterable v-model="scope.row.work_order_id"
										placeholder="请选择工单" @change="(e) => workOrderChange(e, scope.row)">
										<el-option v-for="item in workOrderList" :key="item.id"
											:label="'('+item.type_name+') '+item.name" :value="item.id">
											<span style="float: left">({{ item.type_name }}) {{ item.name }}</span>
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="合同:" prop="contract_id">
									<el-select clearable filterable v-model="scope.row.contract_id" placeholder="请选择合同"
										@change="(e) => contractChange(e, scope.row)">
										<el-option v-for="item in scope.row.contractVOList" :key="item.id"
											:label="item.contract_name" :value="item.id">
											<span style="float: left">{{ item.contract_name }}</span>
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="合同时间段:" prop="contract_setting_id">
									<el-select clearable filterable v-model="scope.row.contract_setting_id"
										placeholder="请选择合同时间段" @change="(e) => dateRangeChange(e, scope.row)">
										<el-option v-for="item in scope.row.dateRangeVOList" :key="item.id"
											:label="item.date" :value="item.id">
											<span style="float: left">{{ item.date }}</span>
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="安装工:">
									<span>{{ scope.row.worker_name }}</span>
								</el-form-item>
								<el-form-item label="类型:">
									<el-tag size="mini" v-if="scope.row.install_type==1">上刊</el-tag>
									<el-tag size="mini" v-else-if="scope.row.install_type==2" type="danger">下刊</el-tag>
									<el-tag size="mini" v-else-if="scope.row.install_type==3" type="warning">巡检</el-tag>
									<el-tag size="mini" v-else-if="scope.row.install_type==4" type="success">新安装
									</el-tag>
									<el-tag size="mini" v-else-if="scope.row.install_type==5" type="info">维修</el-tag>
								</el-form-item>
								<el-form-item label="提交时间:">
									<span>{{ scope.row.created_at }}</span>
								</el-form-item>
								<el-form-item label="广告内容:" prop="advertising_content">
									<el-input clearable v-model.trim="scope.row.advertising_content"
										placeholder="请输入广告内容" />
								</el-form-item>
								<el-form-item label="备注:" prop="remark">
									<el-input clearable v-model.trim="scope.row.remark" placeholder="请输入备注" />
								</el-form-item>
								<el-form-item label="故障与否:" prop="breakdown_type">
									<el-select filterable v-if="canChangeBreakType" clearable
										v-model="scope.row.breakdown_type" placeholder="请选择">
										<el-option label="完好" :value="0" />
										<el-option label="故障" :value="1" />
									</el-select>
									<div v-else>
										<el-tag class="names-tag" size="mini" v-if="scope.row.breakdown_type==0"
											type="info"> 完好
										</el-tag>
										<el-tag class="names-tag" size="mini"
											v-if="scope.row.breakdown_type==1 && scope.row.has_to_repair_order_id==0"
											type="danger"> 故障
										</el-tag>
										<el-tag class="names-tag" size="mini"
											v-if="scope.row.breakdown_type==1 && scope.row.has_to_repair_order_id>0"
											type="success"> 已转维修
										</el-tag>
									</div>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="楼盘:" prop="building_area_id">
									<el-select clearable filterable v-model="scope.row.building_area_id"
										placeholder="请选择楼盘" @change="(e) => buildingChange(e, scope.row)"
										:disabled="orderTypeId != 4">
										<el-option v-for="item in scope.row.buildingVOList"
											:key="item.id+'_'+item.work_order_id+'_'+(item.contract_id || '')+'_'+(item.contract_setting_id || '')"
											:label="item.name" :value="item.id">
											<span style="float: left">{{ item.name }}</span>
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="媒体类型:" prop="media_type_id">
									<el-select clearable filterable v-model="scope.row.media_type_id"
										placeholder="请选择媒体类型" @change="(e) => pointTypeChange(e, scope.row)"
										:disabled="orderTypeId != 4">
										<el-option v-for="item in scope.row.pointTypeVOList"
											:key="item.id+'_'+item.work_order_id+'_'+(item.contract_id || '')+'_'+(item.contract_setting_id || '')"
											:label="item.name" :value="item.id">
											<span style="float: left">{{ item.name }}</span>
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="媒体特点:" prop="media_feature">
									<el-select clearable filterable v-model="scope.row.media_feature"
										placeholder="请选择媒体特点" :disabled="orderTypeId != 4">
										<el-option v-for="item in scope.row.mediaFeatureList" :key="item" :label="item"
											:value="item">
											<span style="float: left">{{ item }}</span>
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="尺寸:" prop="size">
									<el-input clearable v-model.trim="scope.row.size" placeholder="请输入尺寸" />
								</el-form-item>
								<el-form-item label="门号:" prop="door_number"
									v-if="scope.row.media_type_pid==119 || scope.row.media_type_pid==120">
									<el-input clearable type="text" v-model.trim="scope.row.door_number"
										placeholder="请输入门号">
										<template slot="append">号门</template>
									</el-input>
								</el-form-item>
								<el-form-item label="护栏号:" prop="rail_number"
									v-if="scope.row.media_type_pid==120 && scope.row.media_type_id==135">
									<el-input clearable type="text" v-model.trim="scope.row.rail_number"
										placeholder="请输入护栏号">
									</el-input>
								</el-form-item>
								<el-form-item label="楼号:" prop="building_number" v-if="scope.row.media_type_pid==119">
									<el-input clearable v-model.trim="scope.row.building_number" placeholder="请输入楼号">
										<template slot="append">号楼</template>
									</el-input>
								</el-form-item>
								<el-form-item label="单元号:" prop="unit_number" v-if="scope.row.media_type_pid==119">
									<el-input clearable v-model.trim="scope.row.unit_number" placeholder="请输入单元号">
										<template slot="append">单元</template>
									</el-input>
								</el-form-item>
								<el-form-item label="楼层:" prop="floor" v-if="scope.row.media_type_pid==119">
									<el-select filterable clearable v-model="scope.row.floor" placeholder="请选择楼层">
										<el-option v-for="item in floorNumber" :key="item" :label="item" :value="item">
											<span style="float: left">{{ item }}</span>
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="楼栋类型:" prop="building_type" v-if="scope.row.media_type_pid==119">
									<el-select filterable clearable v-model="scope.row.building_type"
										placeholder="请选择楼栋类型">
										<el-option v-for="item in building_type_list" :key="item.id" :label="item.name"
											:value="item.id">
											<span style="float: left">{{ item.name }}</span>
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="画面属性:" prop="pic_type">
									<el-select filterable clearable v-model="scope.row.pic_type" placeholder="请选择画面属性">
										<el-option v-for="item in picTypes" :key="item.id" :label="item.name"
											:value="item.id">
											<span style="float: left">{{ item.name }}</span>
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</template>
			</el-table-column>
			<el-table-column prop="flow_status" label="状态" align="center" width="90" fixed="right">
				<template slot-scope="scope">
					<el-tag class="names-tag" size="small" v-if="scope.row.flow_status==3">
						{{ scope.row.flow_current_node_name }}
					</el-tag>
					<el-tag class="names-tag" size="small" v-if="scope.row.flow_status==2" type="info">
						未通过
					</el-tag>
					<el-tag class="names-tag" size="small" v-if="scope.row.flow_status==4" type="success">通过
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" :width="getOperateWidth" align="center" fixed="right">
				<template slot-scope="scope">
					<div class="operation">
						<el-button v-if="hasEditBTN" v-show="!scope.row.isEdit" icon="el-icon-edit-outline"
							type="primary" size="mini" @click.native="edit(scope.row, scope.$index)">修改
						</el-button>
						<el-button v-if="hasEditBTN" v-show="scope.row.isEdit" icon="el-icon-check" type="primary"
							size="mini" @click.native="save(scope.row, scope.$index)">保存
						</el-button>
						<el-button v-if="hasEditBTN" v-show="scope.row.isEdit" icon="el-icon-close"
							class="margin-top-xs" size="mini" @click.native="cancel(scope.row, scope.$index)">取消
						</el-button>
						<el-button v-if="hasDelBTN" icon="el-icon-delete" type="danger" size="mini"
							@click.native="del(scope.row)">删除
						</el-button>
						<el-button v-if="hasCanelUnpassBTN" icon="el-icon-refresh-left" type="danger" size="mini"
							@click.native="cancelUnpass(scope.row.id)">撤销未通过
						</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页数据 -->
		<el-pagination v-if="hasPage" @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page.sync="current" :page-sizes="[5, 10, 20, 30, 40, 50]" :page-size="listParams.page_size"
			layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>
		<input class="hiddenUploadInput" type="file" accept="image/*" ref="uploadInput" @change="handleFile" />
		<template>
			<el-custom-image-viewer :initial-index="imgIndex" :on-save="saveImage" v-if="showViewer"
				:on-close="closeViewer" :url-list="previewSrcList" />
		</template>
	</div>
</template>

<script>
	// import {
	// 	getWorkOrderVOActiveList,
	// 	getContractVOList,
	// 	getDateRangeVOList,
	// 	getBuildingVOList,
	// 	getPointTypeVOList,
	// 	editImg
	// } from '@/api/system/workorder.js'
	import {
		upload as uploadFile
	} from '@/api/other/attachments.js'
	// import {
	// 	updateLightboxAudit as updateAudit,
	// 	del as delAudit,
	// 	checkBatch,
	// 	change_photo,
	// 	cancel_unpass
	// } from '@/api/system/lightbox_audit.js'
	// import {
	// 	get_all_list as getAllWorker
	// } from '@/api/system/worker.js'
	// import {
	// 	get_building_area_for_select as getAllBuilding
	// } from '@/api/business/building/building.js'
	// import {
	// 	list_all3rd_bycode,
	// 	list_all3rd_bytopcode,
	// 	list_all3rd_bycode_contrain_del_close_door
	// } from '@/api/business/setting/dict'
	import {
		Message
	} from 'element-ui'
	import DateRange from '@/components/DateRange/index-old'
	import common from '@/utils/common.js';
	import {
		isArray,
		isTrue
	} from '@/utils/util.js';
	import {
		cloneDeep
	} from 'lodash'
	import ElCustomImageViewer from "./elCustomImageViewer";

	export default {
		name: 'WorkOrderCheckAuditPaneContent',
		// beforeRouteLeave(to, from, next) {
		// 	this.$destroy();
		// 	next();
		// },
		beforeDestroy() {},
		components: {
			ElCustomImageViewer,
			DateRange
		},
		props: {
			picTypes: {
				type: Array,
				default: () => []
			},
			pointTypeList: {
				type: Array,
				default: () => []
			},
			workerList: {
				type: Array,
				default: () => []
			},
			buildingAreaList: {
				type: Array,
				default: () => []
			},
			hasPage: {
				type: Boolean,
				default: true
			},
			getListRequest: {
				type: Function,
				required: true
			},
			listParamsProp: {
				type: Object,
				default: () => ({})
			},
			canEditInfo: {
				type: Boolean,
				default: false
			},
			canChangeBreakType: {
				type: Boolean,
				default: false
			},
			hasTableSelections: {
				type: Boolean,
				default: false
			},
			hasCheckBatchBTN: {
				type: Boolean,
				default: false
			},
			hasEditBTN: {
				type: Boolean,
				default: false
			},
			hasDelBTN: {
				type: Boolean,
				default: false
			},
			hasCanelUnpassBTN: {
				type: Boolean,
				default: false
			},
			orderTypeId: {
				type: Number,
				default: null
			}
		},
		data() {
			return {
				showViewer: false,
				prevOverflow: null,
				previewSrcList: [],
				centerDialogVisible: false,
				// picTypes: [],
				workOrderList: [],
				//buildingAreaList: [],
				// workerList: [],
				// pointTypeList: [],
				// pointTypeListDianti: [],
				// pointTypeListChurokou: [],
				imageArr: [],
				// search form
				searchForm: {
					code: null,
					worker_id: null,
					building_area_id: null,
					media_type_id: null,
					contract_id: null,
				},
				// page option
				total: 0, // 总页数
				current: 1, // 当前页
				// list table
				tableData: [], // 列表数据
				selectIds: [], // 多选选项id
				selectRows: [],
				listParams: {
					code: null,
					worker_id: null,
					building_area_id: null,
					media_type_id: null,
					contract_id: null,
					page: 1,
					page_size: 5,
				}, // list参数
				tabLoading: true,
				imgIndex: 0,
				floorNumber: [2, 1, -1, -2, -3, -4],
				abtypes: ['A面', 'B面'],
				building_type_list: [{
					id: 1,
					name: "多层"
				}, {
					id: 2,
					name: "高层"
				}],

				editTempData: {},

				changePhotoData: {
					lightbox_audit_id: null,
					id: null,
					url: null
				},
				index: null
			}
		},
		computed: {
			getOperateWidth() {
				const that = this
				let count = 0
				if (that.hasEditBTN) count++
				if (that.hasDelBTN) count++
				return (count * 60 + 50 + (that.hasCanelUnpassBTN ? 100 : 0))
			}
		},
		mounted() {
			// this.getList()
			// this.getWorkOrderList()
			//this.getBuildingList()
			//this.getPointTypeList()
			//this.getWorkerList()
			// this.getPicTypes()
		},
		methods: {
			closeViewer() {
				document.body.style.overflow = this.prevOverflow;
				this.showViewer = false;
			},
			showImageDialog(imageArr, src) {
				this.prevOverflow = document.body.style.overflow;
				document.body.style.overflow = 'hidden';
				this.imageArr = imageArr;
				this.previewSrcList = imageArr.map(item => item.url);
				for (let i = 0; i < this.previewSrcList; i++) {
					if (src == this.previewSrcList[i]) {
						this.imgIndex = i;
					}
				}
				this.showViewer = true;
			},
			saveImage(url) {
				let imageId = null;
				for (let i = 0; i < this.imageArr.length; i++) {
					if (url == this.imageArr[i].url) {
						imageId = this.imageArr[i].id;
					}
				}
				// var body = document.getElementsByClassName("el-tabs__header")[0];
				var elementsByClassName = document.getElementsByClassName("el-image-viewer__img");
				var transaction = elementsByClassName[0].style.transform;
				var deg = transaction.substring(transaction.indexOf('rotate') + 7, transaction.indexOf('deg'));
				const loading = this.$loading({
					lock: true,
					text: '保存中',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				editImg({
					url: url,
					deg: deg,
					id: imageId
				}).then(
					res => {
						this.showViewer = false;
						this.getList();
						loading.close();
					}
				).catch(() => {
					loading.close();
				})
			},
			// getPicTypes() {
			//   const that = this;
			//   list_all3rd_bycode_contrain_del_close_door({code: 'sbxg-hmsx'})
			//     .then(({data}) => {
			//       that.picTypes = data || []
			//     });
			// },
			handleFile(e) {
				let loading = common.showLoading({
					text: '上传图片中...'
				})
				const that = this
				let files = e.target.files;
				let uploadData = new FormData()
				let file = files[files.length - 1]

				// 限制2M以内
				if (file.size / (Math.pow(1024, 2)) > 2) {
					this.$notify.error({
						title: "错误",
						message: "不能上传大小超过2MB的图片"
					});
				} else {
					uploadData.append('file', file)
				}
				return uploadFile(uploadData)
					.then(({
						data
					}) => {
						if (data) {
							loading = common.showLoading({
								text: '替换图片中...'
							})
							that.changePhotoData.url = data
							change_photo(that.changePhotoData)
								.then(({
									data
								}) => {
									loading.close()
									if (isTrue(data)) {
										common.messageSuccess('替换成功!')
										that.changePhotoData = {
											lightbox_audit_id: null,
											id: null,
											url: null
										}
										that.getList()
									} else {
										common.messageError('替换失败!')
									}
								})
								.catch(() => {
									loading.close()
								})
						} else {
							loading.close()
							common.messageError('图片上传失败!')
						}
					})
					.catch(() => {
						loading.close()
					})
			},
			async confirmChangePhoto(lightBox_audit_id, id) {
				const that = this
				that.changePhotoData.lightbox_audit_id = lightBox_audit_id
				that.changePhotoData.id = id
				const confirm = await common.confirmDialog('您确定要替换照片吗?');
				if (confirm) {
					that.$refs.uploadInput.click()
				}
			},
			// 工单列表
			getWorkOrderList(building_area_id = null) {
				getWorkOrderVOActiveList(this.listParamsProp.work_order_id, {
					orderTypeId: this.orderTypeId,
					building_area_id: building_area_id
				}).then(res => {
					this.workOrderList = res.data;
				}).catch(() => {})
			},
			// // 楼盘列表
			// getBuildingList() {
			//   getAllBuilding().then(res => {
			//     this.buildingAreaList = res.data;
			//   })
			//     .catch(() => {
			//     })
			// },
			// // 工人列表
			// getWorkerList() {
			//   getAllWorker().then(res => {
			//     this.workerList = res.data;
			//   })
			//     .catch(() => {
			//     })
			// },
			// // 点位类型列表
			// getPointTypeList() {
			//   const that = this
			//   return list_all3rd_bytopcode({
			//     code: 'dwxg'
			//   })
			//     .then(res => {
			//       const {
			//         code,
			//         data
			//       } = res
			//       that.pointTypeListDianti = []
			//       that.pointTypeListChurukou = []
			//       that.pointTypeList = data || []
			//       data.forEach(item => {
			//         if (item.code.indexOf('dwxg-dtmt') != -1) {
			//           that.pointTypeListDianti.push(cloneDeep(item))
			//         } else {
			//           that.pointTypeListChurukou.push(cloneDeep(item))
			//         }
			//       })
			//     })
			// },

			validBeforeOnCheckBatch() {
				const that = this
				return new Promise(async resolve => {
					if (!that.selectRows || that.selectRows.length <= 0) {
						common.messageError('请先勾选设备数据行!')
						resolve(false)
					} else {
						const flag = await that.checkForm()
						if (!flag) {
							common.messageError('信息不完整，请检查勾选的设备信息!')
							resolve(false)
						} else resolve(true)
					}
				})

			},
			checkForm() {
				const that = this
				return new Promise(resolve => {
					if (isArray(that.selectRows) && that.selectRows.length > 0) {
						let allValids = []
						for (let i = 0; i < that.selectRows.length; i++) {
							const item = that.selectRows[i]
							allValids.push(new Promise((resolve, reject) => {
								that.$refs['rowForm' + item.id].validate(valid => {
									console.log(valid)
									if (valid) resolve()
									else reject()
								})
							}))
						}
						if (allValids.length > 0) {
							Promise.all(allValids)
								.then(() => {
									console.log(1)
									resolve(true)
								})
								.catch(() => {
									console.log(2)
									resolve(false)
								})
						} else {
							console.log(3)
							resolve(false)
						}
					}
				})

			},
			async cancelUnpass(id) {
				const that = this
				const confirm = await common.confirmDialog('您确认要撤销未通过，变更为待审核?');
				if (confirm) {
					const loading = common.showLoading({
						text: '撤销中'
					});
					cancel_unpass({
							id: id
						})
						.then(({
							message
						}) => {
							loading.close();
							common.messageSuccess(message);
							that.getList(true, 'checkToCheck');
						});
				}
			},
			async passBatch() {
				const that = this
				const valid = await that.validBeforeOnCheckBatch()
				if (!valid) return;
				const confirm = await common.confirmDialog('您确认要通过?')
				if (confirm) that.onCheckBatch(1)
			},
			async unpassBatch() {
				const that = this
				// const valid = await that.validBeforeOnCheckBatch()
				// if (!valid) return;
				const confirm = await common.confirmDialog('您确认要不通过?')
				if (confirm) that.onCheckBatch(-1)
			},
			onCheckBatch(auditStatus) {
				const that = this
				const loading = common.showLoading({
					text: '提交中'
				})
				let orginDataList = cloneDeep(that.selectRows)
				let dataList = []
				if (isArray(orginDataList)) {
					dataList = orginDataList.map(item => {
						return Object.assign({
							nodeId: item.flow_current_node_id,
							auditStatus: auditStatus
						}, that.formatRowData(item))
					})
				}
				if (isArray(dataList) && dataList.length > 0) {
					checkBatch(dataList)
						.then(({
							message
						}) => {
							loading.close()
							common.messageSuccess(message)
							that.getList(true, auditStatus == 1 ? 'checkPassed' : 'checkUnpassed')
						})
						.catch(() => {
							loading.close()
						})
				}
			},
			edit(row, index) {
				const that = this
				that.editTempData = cloneDeep(row)
				row.isEdit = true
				that.$set(that.tableData, index, row)
				if (this.orderTypeId != 4) {
					this.getWorkOrderList(row.building_area_id) //获取工单 获取有此楼盘id的同类型工单,
				}
			},
			outEdit(row, index, refresh = false) {
				const that = this
				row.isEdit = false
				that.editTempData = {}
				that.$set(that.tableData, index, row)
				that.$nextTick(() => {
					if (refresh) that.getList()
				})
			},
			async save(row, index) {
				const that = this
				const flag = await common.confirmDialog('您确定要保存吗?');
				if (flag) that.onSave(row, index)
			},
			cancel(row, index) {
				const that = this
				row = cloneDeep(that.editTempData)
				that.outEdit(row, index)
			},
			async del(row) {
				const flag = await common.confirmDialog('您确认要删除?')
				if (flag) {
					let ids = row.id ? [row.id] : this.selectIds;
					delAudit(ids).then(res => {
						let {
							code,
							date,
							message
						} = res;
						this.getList();
						common.messageSuccess(message)
					});
				}
			},

			onSave(row, index) {
				const that = this
				const loading = common.showLoading({
					text: '保存中'
				})
				let data = that.formatRowData(row)
				updateAudit(data)
					.then(({
						message
					}) => {
						loading.close()
						common.messageSuccess(message)
						that.outEdit(row, index, true)
					})
					.catch(() => {
						loading.close()
					})
			},


			getList(emitRefresh = false, toTabName = 'checkToCheck') {
				const that = this
				if (emitRefresh) that.emitRefresh(toTabName)
				else {
					that.tabLoading = true
					that.getListRequest(Object.assign(that.listParams, that.listParamsProp || {}))
						.then(async res => {
							if (that.hasPage) {
								const {
									data: {
										records,
										total
									}
								} = res
								that.tableData = []
								for (let i = 0; i < records.length; i++) {
									let item = records[i]
									//if (item.img_list_str) item.img_list = item.img_list_str.split(',')
									that.handleDefaultMediaFeature(item)
									that.changeRileByMediaTypePid(item)
									that.tableData.push(item)
								}
								that.total = total || 0
							} else {
								const {
									data
								} = res
								that.tableData = data
								that.total = data.length || 0
							}
							that.tabLoading = false
							that.emitTotal()
						})
				}
			},

			handleDefaultMediaFeature(item) {
				let media_type_id = item.media_type_id;
				let mediaFeatureList = [];
				const pointTypeVOList = item.pointTypeVOList || []
				for (var i = 0; i < pointTypeVOList.length; i++) {
					if (pointTypeVOList[i].id == media_type_id) {
						item.media_type_pid = pointTypeVOList[i].pid;
						if (pointTypeVOList[i].params != null && pointTypeVOList[i].params != '') {
							item.mediaFeatureList = pointTypeVOList[i].params.split(',');
						} else {
							item.mediaFeatureList = [];
						}
						break;
					}
				}
			},

			getContractVOList(params, row) {
				getContractVOList(params)
					.then(res => {
						row.contractVOList = res.data || []
						row.dateRangeVOList = []
						row.contract_id = null
						row.contract_setting_id = null
						if (this.orderTypeId == 4) {
							row.building_area_id = null
							row.media_type_id = null
							row.media_feature = null
							row.buildingVOList = []
							row.pointTypeVOList = []
							row.mediaFeatureList = []
						}
						if (row.contractVOList.length == 0) {
							this.getBuildingVOList(params, row)
						}
					})
			},
			getDateRangeVOList(params, row) {
				getDateRangeVOList(params)
					.then(res => {
						row.contract_setting_id = null
						row.dateRangeVOList = res.data || []
						if (this.orderTypeId == 4) {
							row.buildingVOList = []
							row.pointTypeVOList = []
							row.mediaFeatureList = []
							row.building_area_id = null
							row.media_type_id = null
							row.media_feature = null
						}
					})
			},
			getBuildingVOList(params, row) {
				getBuildingVOList(params)
					.then(res => {
						if (this.orderTypeId == 4) {
							row.buildingVOList = res.data || []
							row.pointTypeVOList = []
							row.mediaFeatureList = []
							row.building_area_id = null
							row.media_type_id = null
							row.media_feature = null
						}
					})
			},
			getPointTypeVOList(params, row) {
				getPointTypeVOList(params)
					.then(res => {
						row.pointTypeVOList = res.data || []
						row.mediaFeatureList = []
						row.media_type_id = null
						row.media_feature = null
					})
			},

			// 改变合同选中值
			workOrderChange(val, row) {
				const that = this
				that.getContractVOList({
					work_order_id: row.work_order_id
				}, row)
			},
			// 改变合同选中值
			contractChange(val, row) {
				const that = this
				that.getDateRangeVOList({
					work_order_id: row.work_order_id,
					contract_id: val
				}, row)
			},
			// 改变时间段选中值
			dateRangeChange(val, row) {
				const that = this
				that.getBuildingVOList({
					work_order_id: row.work_order_id,
					contract_id: row.contract_id,
					contract_setting_id: val
				}, row)
			},
			// 改变楼盘选中值
			buildingChange(val, row) {
				const that = this
				that.getPointTypeVOList({
					work_order_id: row.work_order_id,
					contract_id: row.contract_id,
					contract_setting_id: row.contract_setting_id,
					building_area_id: val
				}, row)
			},
			// 改变媒体类型选中值
			pointTypeChange(val, row) {
				const that = this
				row.mediaFeatureList = []
				row.media_feature = null
				that.$nextTick(() => {
					that.handleDefaultMediaFeature(row)
				})
			},

			// 点位类型，影响表单验证
			changeRileByMediaTypePid(row) {
				var pid = row.media_type_pid;
				var id = row.media_type_id;
				if (pid == 119) {
					row.cuRulesAudit = {
						building_area_id: [{
							required: true,
							message: '请选择楼盘',
							trigger: 'change'
						}],
						media_type_id: [{
							required: true,
							message: '请选择媒体类型',
							trigger: 'change'
						}],
						building_number: [{
							required: true,
							message: '请输入楼号',
							trigger: 'blur'
						}],
						unit_number: [{
							required: true,
							message: '请输入单元号',
							trigger: 'blur'
						}],
						floor: [{
							required: true,
							message: '请选择楼层',
							trigger: 'change'
						}],
						building_type: [{
							required: true,
							message: '请选择楼栋类型',
							trigger: 'change'
						}]
					};
				} else if (pid == 120) {
					let rule = {
						building_area_id: [{
							required: true,
							message: '请选择楼盘',
							trigger: 'change'
						}],
						media_type_id: [{
							required: true,
							message: '请选择媒体类型',
							trigger: 'change'
						}],
						door_number: [{
							required: true,
							message: '请输入门号',
							trigger: 'blur'
						}]
					};
					if (id == 135) {
						rule.rail_number = [{
							required: true,
							message: '请输入护栏号',
							trigger: 'blur'
						}]
					}
					row.cuRulesAudit = Object.assign({}, rule);
				} else {
					row.cuRulesAudit = {
						building_area_id: [{
							required: true,
							message: '请选择楼盘',
							trigger: 'change'
						}],
						media_type_id: [{
							required: true,
							message: '请选择媒体类型',
							trigger: 'change'
						}]
					};
				}
			},

			// 格式化提交数据
			formatRowData(row) {
				const that = this
				let data = cloneDeep(row)

				const pid = data.media_type_pid;
				if (pid == 119) {
					data.rail_number = null;
				} else if (pid == 120) {
					data.building_number = null;
					data.unit_number = null;
					data.floor = null;
					data.building_type = null;
				} else {
					data.door_number = null;
					data.rail_number = null;
					data.building_number = null;
					data.unit_number = null;
					data.floor = null;
					data.building_type = null;
				}
				return data;
			},

			// 重置搜索表单
			searchReset() {
				this.$refs.searchForm.resetFields()
				let params = this.$refs.searchForm.model
				this.listParams = Object.assign(this.listParams, params)
				this.getList()
			},
			// 搜索
			searchSubmit(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						const params = this.$refs[formName].model
						this.listParams.page = 1
						this.current = 1
						this.listParams = Object.assign(this.listParams, params)
						this.getList()
					} else {
						console.log('搜索出错!')
						return false
					}
				})
			},
			// 分页 -pageSize改变
			handleSizeChange(val) {
				this.listParams.page_size = val
				this.getList()
			},
			// 分页 -pageNum改变
			handleCurrentChange(val) {
				this.listParams.page = val
				this.getList()
			},
			// 表单多选
			handleSelectionChange(val) {
				this.selectIds = val.map(item => item.id)
				this.selectRows = val
			},
			//带状态表格
			tableRowClassName({
				row
			}) {
				if (row.breakdown_type == 1) {
					if ((row.flow_status == 3 || row.flow_status == 4)) {
						if (row.has_to_repair_order_id == 0) {
							return "warn-row";
						} else {
							return "complete-row";
						}
					}
					if (row.flow_status == 2) return 'stop-row';
				}
				return "";
			},


			emitTotal() {
				const that = this
				that.$nextTick(() => {
					that.$emit('getTotal', that.total)
				})
			},

			emitRefresh(toTabName) {
				const that = this
				that.$nextTick(() => {
					that.$emit('toRefresh', toTabName)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-container {
		.el-table {
			.search {
				/deep/ .el-form .el-form-item.el-form-item--mini:last-child {
					margin-left: 20px !important;
				}
			}

			.names-tag {
				box-sizing: border-box;
				margin: 3px;
			}

			/deep/ .stop-row {
				color: #cccccc !important;
			}

			/deep/ .warn-row {
				color: #e54d42 !important;
			}

			/deep/ .complete-row {
				color: #39b54a !important;
			}

			.audit-info {
				/deep/ .el-form-item.el-form-item--mini {
					margin-bottom: 0;
					text-align: left;

					.el-select.el-select--mini {
						width: 100%
					}
				}
			}


		}

		.hiddenUploadInput {
			display: none;
		}
	}
</style>
